import { memo } from "react"

interface IProps {
  num: number
  setNum: (num: number) => void
  changeNum: () => void
}

// memo可以缓存组件，当组件的内容不受修改时，可以不更新该组件。
const C = memo(() => {
  console.log('C: 我被重新渲染了...')
  return (
    <>
      <p>我是C</p>
    </>
  )
})

const B: React.FC<IProps> = memo(({ num, setNum, changeNum }) => {
  console.log('B: 我被渲染了...')
  return (
    <>
      <p>从A接收的num: {num}</p>
      <button onClick={() => setNum(num + 1)}>num+1</button>
      <button onClick={changeNum}>A num+1</button>
      <C />
    </>
  )
})

export default B
